<template>
  <div class="body">
    <div class="header">学科竞赛战绩</div>
    <div class="center">
      <div class="total">
        <span>创客实验室总计获得{{ total }}项奖项</span>
      </div>
      <div class="main">
        <div class="Thelist">
          <div
            v-for="record in lCompetitions"
            :key="record.game_id"
            class="list_item"
          >
            {{ record.game_time }}
            {{ record.name }}在{{ record.game_name }}中获得{{
              record.game_result
            }}
          </div>
        </div>
        <div class="performance">
          <div class="perHeader"><span>卓越表现</span></div>
          <swiper class="Innerswiper" :options="InnerswiperOption">
            <swiper-slide
              @touchmove.stop
              v-for="(group, index) in rCompetitions"
              :key="index"
            >
              <div
                class="certificateImg"
                v-for="item in group"
                :key="item.game_id"
              >
                <img
                  :src="item.certificate"
                  alt="Certificate"
                  v-if="item.certificate"
                />
                <span>
                  {{ item.game_time }}
                  {{ item.name }}在{{ item.game_name }}中获得{{
                    item.game_result
                  }}
                </span>
              </div>
            </swiper-slide>
          </swiper>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getHomePageGameRecords,
  getOutstandingRecords,
} from "@/api/portal/competition.js";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default {
  name: "competition",
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      total: '',
      lCompetitions: null,
      rCompetitions: null,
      InnerswiperOption: {
        loop: true,
        // autoplay: {
        //   delay: 6000,
        //   disableOnInteraction: false,
        // },
      },
    };
  },
  // 切换时刷新
  // onshow() {
  //   getOutstandingRecords().then((res) => {
  //     console.log(res);
  //     if (res.code == 200) {
  //       this.total = res.data.total;
  //       this.lCompetitions = res.data.competitions;
  //     } else {
  //     }
  //   });
  //   getHomePageGameRecords().then((res) => {
  //     console.log(res);
  //     if (res.code === 200) {
  //       const competitions = res.data.competitions;
  //       if (Array.isArray(competitions)) {
  //         // 倒序 competitions 数组

  //         const groupedCompetitions = [];
  //         for (let i = 0; i < competitions.length; i += 6) {
  //           groupedCompetitions.push(competitions.slice(i, i + 6));
  //         }
  //         this.rCompetitions = groupedCompetitions.slice().reverse();
  //         console.log(this.rCompetitions);
  //       } else {
  //         console.error("Competitions is not an array");
  //         this.showErrorAlert("Invalid data received");
  //       }
  //     } else {
  //       console.error("Failed to fetch game records: ", res.message);
  //       this.showErrorAlert(res.message);
  //     }
  //   });
  // },
  created() {
    this.getOutstandingRecords();
    this.getHomePageGameRecords();
  },

  methods: {
    getOutstandingRecords() {
      getOutstandingRecords().then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.total = res.data.total;
          this.lCompetitions = res.data.competitions;
        } else {
        }
      });
    },
    getHomePageGameRecords() {
      getHomePageGameRecords().then((res) => {
        console.log(res);
        if (res.code === 200) {
          const competitions = res.data.competitions;
          if (Array.isArray(competitions)) {
            // 倒序 competitions 数组

            const groupedCompetitions = [];
            for (let i = 0; i < competitions.length; i += 6) {
              groupedCompetitions.push(competitions.slice(i, i + 6));
            }
            this.rCompetitions = groupedCompetitions.slice().reverse();
            console.log(this.rCompetitions);
          } else {
            console.error("Competitions is not an array");
            this.showErrorAlert("Invalid data received");
          }
        } else {
          console.error("Failed to fetch game records: ", res.message);
          this.showErrorAlert(res.message);
        }
      });
    },
  },

  // mounted() {
  //   getOutstandingRecords().then((res) => {
  //     console.log(res);
  //     if (res.code == 200) {
  //       this.total = res.data.total;
  //       this.lCompetitions = res.data.competitions;
  //     } else {
  //     }
  //   });
  //   getHomePageGameRecords().then((res) => {
  //     console.log(res);
  //     if (res.code === 200) {
  //       const competitions = res.data.competitions;
  //       if (Array.isArray(competitions)) {
  //         // 倒序 competitions 数组

  //         const groupedCompetitions = [];
  //         for (let i = 0; i < competitions.length; i += 6) {
  //           groupedCompetitions.push(competitions.slice(i, i + 6));
  //         }
  //         this.rCompetitions = groupedCompetitions.slice().reverse();
  //         console.log(this.rCompetitions);
  //       } else {
  //         console.error("Competitions is not an array");
  //         this.showErrorAlert("Invalid data received");
  //       }
  //     } else {
  //       console.error("Failed to fetch game records: ", res.message);
  //       this.showErrorAlert(res.message);
  //     }
  //   });
  // },
};
</script>

<style lang="scss" scoped>
.body {
  display: flex;
  position: absolute;
  width: 100%;
  height: 100%;
}

.header {
  background-color: rgba(255, 255, 255, 0.5);
  font-size: 250%;
  padding-top: 2%;
  font-size: 5vh;
}

.center {
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
}

.total {
  display: flex;
  width: 36%;
  margin-left: 5%;
  height: 6%;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  text-align: center;
  font-size: 3vh;
}

.main {
  background-color: rgba(255, 255, 255, 0.5);
  width: 90%;
  height: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between; /* 使子元素在主轴上分散排列 */
}

.Thelist {
  width: 40%;
  height: 100%;
  border: 2px solid black; /* 增加黑边框 */
  margin-right: 5%; /* 可以调整右边距，确保有足够的空间 */
  overflow: scroll;
}

.list_item {
  margin: 2% 2%;
  font-size: 2vh;
}

.perHeader {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  text-align: center;
  margin: 0 auto;
  width: 60%;
  height: 7%;
}

.performance {
  width: 60%; /* 调整宽度，以适应新的布局 */
  height: 100%;
  font-size: 3vh;
}

.Innerswiper {
  height: 90%;
  width: 100%;

  .swiper-slide {
    display: flex;
    flex-wrap: wrap; /* 允许子元素换行 */
    justify-content: space-between; /* 使每行的子元素均匀分布 */
    align-content: flex-start; /* 使子元素从顶部开始排列 */
    text-align: center;
    font-weight: bold;
    font-size: 10;
    background-color: rgba(255, 255, 255, 0.5);
  }
}

.certificateImg {
  width: 28%; /* 调整宽度，使其占满一行 */
  height: 50%; /* 高度自适应 */
  padding: 0 2%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.certificateImg img {
  width: 100%;
  height: 70%;
  background-size: cover; /* 图片正好填充 */
  background-repeat: no-repeat; /* 防止图片重复 */
  background-position: center; /* 图片居中 */
  margin-bottom: 2%;
}

.certificateImg span {
  font-size: 1.5vh;
  font-weight: 00;
}
</style>
